<template>
  <view class="calculator">
    <input v-model="num1" type="number" class="input-number" placeholder="输入第一个数字" />
    <input v-model="num2" type="number" class="input-number" placeholder="输入第二个数字" />

    <view class="button-group">
      <button @click="calculate('add')" v-if="operation == 'add'" class="calc-button">加</button>
      <button @click="calculate('multiply')" v-else-if="operation == 'multiply'" class="calc-button">乘</button>
      <button @click="calculate('divide')" v-else-if="operation == 'divide'" class="calc-button">除</button>
    </view>
  </view>
</template>

<script>
export default {
  props: ['operation'],
  data() {
    return {
      num1: '',
      num2: '',
      result: 0
    }
  },
  methods: {
    calculate(op) {
      switch (op) {
        case 'add': this.result = +this.num1 + +this.num2; break;
        case 'multiply': this.result = this.num1 * this.num2; break;
        case 'divide': this.result = this.num1 / this.num2; break;
      }
      this.$emit('calculated', this.result); 
    }
  }
}
</script>

<style scoped>
.calculator {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input-number {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

.button-group {
  display: flex;
  gap: 10px;
}

.calc-button {
  flex: 1;
  padding: 10px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

.calc-button:active {
  background-color: #3a7bc8;
}
</style>